<template>
	<view class="page-body">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<!-- 头部导航 -->
		<view class="header">
			<view class="left_box" @click="goBack()">
				<image class="left_icon" mode="widthFix" src="@/static/images/leftMark_icon.png"></image>
			</view>
			<view class="title">新分配{{ total ? `(${total})` : ''}}</view>
			<view class="right_box"></view>
		</view>

		<!-- 内容 -->
		<view class="content_box">
			<view class="list_ul">
				<block v-for="(item,idx) in clueList" :key="'a_'+ idx">
					<view class="list_li" @click="goDetails(item.id, item)">
						<view class="ou_li">
							<image class="levelImg" v-if="item.intentionLevel" :src="require('@/static/images/level_'+ item.intentionLevel +'.png')"></image>
							<view class="left_box">
								<view class="info_box">
									<view class="info_name">{{item.customerName}}</view>
									<view class="info_time">分配时间：{{item.assignTime | dataFormat }}</view>
								</view>
								<view class="frequency">
									跟进<text>{{item.followNum || 0}}</text>次 到店<text>{{item.shopNum || 0}}</text>次
								</view>
							</view>
						</view>
						
						<view class="ou_li">
							<image class="iconImg" src="@/static/images/model_icon.png"></image>
							<view class="">{{item.intentCarModel}}/{{item.intentCarStyle}}</view>
						</view>
						<view class="ou_li last_li">
							<image class="iconImg" src="@/static/images/channel_icon.png"></image>
							<view class="">{{item.firstChannelName}}/{{item.secondChannelName}}</view>
						</view>

						<view class="manualCleaning" v-if="item.cleanProp == '人工清洗'">
							<image src="@/static/images/manualCleaning.png"></image>
						</view>

						<view class="operationBox">
							<view class="btn" @click.stop="showOperation('phone', item)">
								<image class="iconImg" src="@/static/images/tel2_icon.png"></image>打电话</view>
							<view class="btn" @click.stop="showOperation('sms', item)">
								<image class="iconImg" src="@/static/images/information2_img.png"></image>发短信</view>
							<view class="btn" @click.stop="showOperation('come_shop', item)">
								<image class="iconImg" src="@/static/images/interview2_img.png"></image>来店面谈</view>
							<view class="btn" @click.stop="showOperation('outside_shop', item)">
								<image class="iconImg" src="@/static/images/meet2_img.png"></image>店外会面</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<show-modal v-if="isShowModal" :showType="showType" :isPopup="isShowModal" :popUpContent="popUpContent"  :showModalOperation.sync="isShowModal"/>
	</view>
</template>

<script>
	import {
		getAssign
	} from '@/service/api/api.js';
	import {
		parseTime
	} from "@/common/util.js";
	import showModal from "@/components/showModal/index.vue";
	export default {
		components: {
			showModal
		},
		data() {
			return {
				userInfo: {},
				listQuery: {
					deptId: '',
					userId: '',
					roleType: '',
					firstChannelIds: '',
					secondChannelIds: '',
					intentCarModels: '',
					intentCarStyles: '',
				},
				clueList: [
				// 	{
				// 	intentionLevel: 'A',
				// 	customerName: '高强',
				// 	assignTime: '04-23  08:00',
				// 	intentCarModel: '官网',
				// 	intentCarStyle: '汽车之家',
				// 	firstChannelName: '官网',
				// 	secondChannelName: '汽车之家'
				// },
				],
				total: 0,
				isShowModal: false,
				showType:"call",
				popUpContent: {}
			}
		},
		filters: {
			dataFormat(val) {
				return parseTime(val, '{y}-{m}-{d} {h}:{i}')
			}
		},
		onLoad() {
			try {
				this.userInfo = uni.getStorageSync('user_info')
				console.log(this.userInfo)
			} catch (e) {

			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.reqClueList()
			},

			reqClueList() {
				let data = this.listQuery
				let newData = {}
				for (let key in data) {
					if (data[key] && data[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
						newData[key] = data[key]
					}
				}

				getAssign({
					...newData,
					deptId: this.userInfo.userDeptId,
					roleType: this.userInfo.role,
					userId: this.userInfo.userId
				}).then(res => {
					if (res.data.code == 0) {
						this.clueList = res.data.data.uniques
						this.total = res.data.data.newAssign
					} else {

					}
				})
			},
			
			//拨打电话 发短信 其他跳转
			showOperation(e, val){
				switch (e){
					case 'phone':
						this.showType='phone'
						this.popUpContent = {
							...val,
							followNum: val.invalidNum || 0
						}
						this.isShowModal=true
						break;
					case 'sms':
						this.showType='sms'
						this.popUpContent = {
							...val,
							followNum: val.invalidNum || 0
						}
						
						this.isShowModal=true
						break;
					case 'come_shop':
						uni.navigateTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
							url: `/pages/clue/clueFollowUp/index?uniqueId=${val.uniqueId}&followNum=${val.invalidNum || 0}&followUp=${e}&clueStatus=${val.clueStatus}`
						})
						break;
					case 'outside_shop':
						uni.navigateTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
							url: `/pages/clue/clueFollowUp/index?uniqueId=${val.uniqueId}&followNum=${val.invalidNum || 0}&followUp=${e}&clueStatus=${val.clueStatus}`
						})
						break;
					default:
						break;
				}
			},

			goDetails(id,item) {
				uni.navigateTo({
					url: `/pages/clue/clueDetails/index?id=${id}&phone=${item.mobile}&followNum=${item.invalidNum || 0}&tabIdx=1&clueStatus=${item.clueStatus}`
				})
			},
			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
